<template>
  <div class="about" @mousemove="getMouse">
    <h1>This is an about page</h1>
    <p>{{x}}--{{y}}</p>
    <hr/>
    <h2 v-if="loading">loading加载中...</h2>
    <img v-else :src="dogUrl">
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
    name:"AboutView",
})
</script>

<script lang="ts" setup>
import useMousePoint from "@/hooks/useMousePoint";
import useShowDog from "@/hooks/useShowDog";
let {x,y,getMouse} = useMousePoint()
let {dogUrl,loading} = useShowDog()

</script>

<style lang="scss" scoped>
.about{
  height: 600px;
  width: 100%;
  border: 1px solid #2c3e50;
}
</style>